<template>
<section>
  <div class="info">
    <div class="trade_wrap2">
    <div class="buy-title text-center p10" style="padding: 10px;position: relative;">
      <span>{{$t('exchange.marketExecution')}}</span>
      <Icon type="ios-arrow-back" size="18" style="position: absolute;left: 10px;" @click="back" />
    </div>
    <div class="line1"></div>
    <Row class="buy-view">
      <Col span="24" class="p10">
      <Col span="6" class="text-right">
        {{$t('exchange.stock')}}：
      </Col>
      <Col span="18" class="text-left">
        <span style="color: #fff;">{{ currentRow.Name }}</span>
      </Col>
      </Col>
      <Col span="24" class="p10">
      <Col span="6" class="text-left mt15">
        {{$t('exchange.cprize')}}：
      </Col>
      <Col span="18" class="text-left mt15">
        <span class="current-prize">{{ currentRow.Last }}</span>
      </Col>
      </Col>
      <Col span="24" class="p10">
      <Col span="6" class="text-left mt15">
        {{$t('exchange.quantity')}}：
      </Col>
      <Col span="18" class="text-left mt15">
        <div>
          <InputNumber  :min="1" v-model="value" style="width: 220px" />
          <span style="font-size: 14px;">{{$t('exchange.lot')}}</span>
          <span style="color:red; font-size: 14px;margin-left: 15px">{{$t('exchange.note')}}</span>
        </div>
        <div class="mt15">
          <Row :gutter="15">
            <Col span="6" class="">
              <div class="z-list" :class="{'z-active': value === 1}" @click="choiceZ(1)">1{{$t('exchange.lot')}}</div>
            </Col>
            <Col span="6" class="">
              <div class="z-list" :class="{'z-active': value === 2}" @click="choiceZ(2)">2{{$t('exchange.lot')}}</div>
            </Col>
            <Col span="6" class="">
              <div class="z-list" :class="{'z-active': value === 5}" @click="choiceZ(5)">5{{$t('exchange.lot')}}</div>
            </Col>
            <Col span="6" class="">
              <div class="z-list" :class="{'z-active': value === 10}" @click="choiceZ(10)">10{{$t('exchange.lot')}}</div>
            </Col>
            <Col span="6" class="mt10">
              <div class="z-list" :class="{'z-active': value === 20}" @click="choiceZ(20)">20{{$t('exchange.lot')}}</div>
            </Col>
            <Col span="6" class="mt10">
              <div class="z-list" :class="{'z-active': value === 50}" @click="choiceZ(50)">50{{$t('exchange.lot')}}</div>
            </Col>
            <Col span="6" class="mt10">
              <div class="z-list" :class="{'z-active': value === 100}" @click="choiceZ(100)">100{{$t('exchange.lot')}}</div>
            </Col>
            <Col span="6" class="mt10">
              <div class="z-list" :class="{'z-active': value === 200}" @click="choiceZ(200)">200{{$t('exchange.lot')}}</div>
            </Col>
          </Row>
        </div>

      </Col>
      </Col>
      <Col span="24" class="p10">

      <Col span="6" class="text-left mt15">
        {{$t('exchange.value')}}：
      </Col>
      <Col span="18" class="text-left mt15">
        <div>
          <span style="font-size: 18px;color: #ffffff;">{{ shizhi }}</span>
        </div>
      </Col>
      </Col>
      <Col span="24" class="p10">
      <Col span="6" class="text-left mt15">
        {{$t('exchange.servicefee')}}：
      </Col>
      <Col span="18" class="text-left mt15">
        <div>
          <Input v-model="service_fee" readonly style="width: 100%"></Input>
        </div>
      </Col>
      </Col>
      <Col span="24" class="p10">
      <Col span="6" class="text-left mt15">
        {{$t('exchange.paymentamount')}}：
      </Col>
      <Col span="18" class="text-left mt15">
        <div>
          <Input v-model="payment_amount" readonly style="width: 100%"></Input>
        </div>
        <!--                <InputNumber v-model="payment_amount" readonly controls-outside style="width: 100%" /></div>-->
        <div class="exchange-tip">
          <p>{{$t("exchange.timerange")}}</p>
          <p>{{$t("exchange.tday")}}:9:00-12:30 14:30-17:00</p>
          <p>{{$t("exchange.ttip")}}</p>
        </div>
        <div class="mt15 trade_bd">
          <Button  class="bg-green" v-loading.fullscreen.lock="fullscreenLoading" @click="buyWithLimitPrice">{{$t("exchange.buyin")}}</Button>
        </div>
      </Col>
      </Col>
    </Row>
  </div>
  </div>
</section>
</template>

<script>
const self = this
export default {
  name: "newTicket",
  data() {
    return {
      currentRow: {},
      fullscreenLoading: false,
      model: 'Canberra',
      value: 1,
      rzmrje: '', // 融资买入金额
      bzj: 2.5, // 保证金
      zjlyl: '', // 资金利用率
      dyAuto: true,
      bzjAuto: true,
      chartDom:'',
      myChart:'',
      options:'',
      sliderStep: [25, 50, 75, 100],
      sliderBuyLimitPercent: 0,
      sliderSellLimitPercent: 0,
      sliderBuyMarketPercent: 0,
      sliderSellMarketPercent: 0,
      memberRate: 0,
      rawData:[],
      // userRealVerified: false, //是否实名认证
      collecRequesting: false,
      currentCoinIsFavor: false,
      isUseBHB: false,
      skin: "night", //皮肤样式day&night
      currentImgTable: "k",
      selectedOrder: "history", //当前显示的委托记录
      selectedPlate: "all", //当前显示的买卖盘
      CNYRate: null,
      datafeed: null,
      defaultPath: "btc_usdt",
      basecion: "MK",
      coinScale: 6,
      baseCoinScale: 6,
      symbolFee: 0.001,
      dataIndex: [],
      dataIndex2: [],
      searchKey: "",
      coinInfo:{},
      currentCoin: {
        base: "",
        coin: "",
        symbol: ""
      },
      enableMarketBuy: 1, // 0:禁用  1:启用
      enableMarketSell: 1,
      exchangeable: 1, // 0:可交易   1:不可交易
      pageSize: 14,
      pageNum: 1,
      total: 0,
      publishType: "NONE",
      currentTime: 0,
      publishAmount: 0,
      publishPrice: 0,
      startTime: "2000-01-01 00:00:00",
      endTime: "2000-01-01 00:00:00",
      clearTime: "2000-01-01 00:00:00",
      showPublish: false,
      showCountDown: false,
      countDownBgColor: "#003478",
      publishState: 0,
      //当前市场上的交易币种，按交易对分
      wallet: {
        base: 0.0,
        coin: 0.0
      },
      showMarket: false,
      fixHistoryHeight: 295,
      // rechargeUrl:'#/finance/recharge',
      // rechargeUSDTUrl:'#/finance/recharge?name=USDT',
      form: {
        buy: {
          limitPrice: 0.0,
          limitAmount: 0.0,
          marketAmount: 0.0,
          limitTurnover: 0.0
        },
        sell: {
          limitPrice: 0.0,
          limitAmount: 0.0,
          marketAmount: 0.0,
          limitTurnover: 0.0
        }
      },
      //   最新价的 table 数据;
      historyOrder: {
        pageSize: 10,
        total: 10,
        page: 0,
        rows: []
      },
      fullTrade: {}
    };
  },
  computed: {
    payment_amount: function() {
      return (parseFloat(this.value * 100 * this.currentRow.Last) + parseFloat(this.value * 100 * this.currentRow.Last / 1000)).toFixed(2)
    },
    shizhi: function() {
      return (this.value * 100 * this.currentRow.Last).toFixed(2)
    },
    service_fee: function() {
      return (this.value * 100 * this.currentRow.Last / 1000).toFixed(4)
    },
    rechargeUSDTUrl: function() {
      return "/uc/recharge?name="+this.currentCoin.base;
      // return "#/finance/recharge?name=" + this.currentCoin.base;
    },
    rechargeCoinUrl: function() {
      return "/uc/recharge?name=" + this.currentCoin.coin;
      // return "#/finance/recharge?name=" + this.currentCoin.coin;
    },
    isLogin: function() {
      return false;
    },
    member: function() {
      return this.$store.getters.member;
    },
    lang: function() {
      return this.$store.state.lang;
    },
    sliderBuyDisabled() {
      let account = this.wallet.base,
          min = this.toFloor(1 / Math.pow(10, this.baseCoinScale));
      return account < min;
    },
    sliderSellDisabled() {
      let account = this.wallet.coin,
          min = this.toFloor(1 / Math.pow(10, this.coinScale));
      return account < min;
    }
  },
  created() {
    console.log(JSON.parse(sessionStorage.getItem("buyInfo")))
    this.currentRow = JSON.parse(sessionStorage.getItem("buyInfo"))
  },
  methods: {
    choiceZ(i) {
      this.value = i
    },
    back() {
      this.$router.back()
    },
    buyWithLimitPrice() {
      this.fullscreenLoading = true
      const data = {
        g_id: this.currentRow.Id,
        code: this.currentRow.Symbol,
        name: this.currentRow.Name,
        current_price: this.currentRow.Last,
        quantity: this.value,
        service_fee: this.service_fee,
        payment_amount : this.payment_amount,
        token: sessionStorage.getItem('token')
      }
      // const str = `/api/?g_id=${this.currentRow.Id}&code=${this.currentRow.Symbol}&name=${this.currentRow.Name}&current_price=${this.currentRow.Last}`
      this.$http.post("/api/buy", data).then(response => {
        var resp = response.body;
        this.fullscreenLoading = false
        if (resp.code === 200) {
          this.$Message.success('购买成功！')
          this.back()
        } else if (resp.code === 201) {
          this.$Message.error('登陆过期！')
        } else if (resp.code === 202) {
          this.$Message.error('您的余额不足！')
        }
      });
    },
  }
}
</script>

<style scoped lang="scss">
@import url(../../assets/css/exchange.css);
$night-bg: #0b1520;
$night-headerbg: #27313e;
$night-contentbg: #192330;
$night-color: #fff;
$blue-color: #2196F3;
.text-left {text-align: left!important;}
.text-center {text-align: center!important;}
.text-right {text-align: right!important;}
.exchange-tip {
  margin-top: 15px;
  color: #ea5c53;
}
.p10 {
  padding: 5px;
}
.z-list {
  background-color: #252525;
  height: 34px;
  line-height: 34px;
  cursor: pointer;
  color: #fff;
}
.z-active {
  background-color: $blue-color;
}
.mt15 {
  margin-top: 15px;
}
.mt10 {
  margin-top: 10px;
}
.info {
  .trade_wrap2 {
    padding: 10px;
    margin-top: 5px;
    background-color: $night-contentbg;
    overflow-y: auto;
    font-size: 14px;
    .buy-title {
      font-size: 14px;
      padding: 5px;
      color: #aaa;
    }
    .buy-view {
      padding: 10px;
      font-size: 14px;
      color: #585858;
      .current-prize {
        color: #0a8415;
      }
    }
  }

  .prize {
    color: #EA5C53;
    font-size: 24px;
  }
  .info-view {
    .col {
      padding: 5px 0;
      text-align: left;
      font-size: 16px;
    }
  }
  .list-view {
    .col_ {
      padding: 5px 0;
      text-align: left;
      font-size: 18px;
    }
  }
}

.line1 {
  width: 100%;
  height: 2px;
  color: #aaa;
  background-color: rgba(255,255,255,0.4);
  //margin: 10px 0;
}
.lightning-panel {
  height: 785px;
  background-color: #192330!important;
  color: #aaa;
  background-color: transparent;
  .title {
    padding: 10px;
    font-size: 18px;
    color: #aaa;
    background-color: rgba(255,255,255,0.2);
  }
}
.exchange {
  color: #fff;
  background-color: #0b1520;
  .main {
    width:99%;
    margin-left: 0.5%;
    display: flex;
    margin-top: 5px;
    .left {
      flex: 0 0 20%;
      border-radius: 0px;
      margin-right: 10px;
      .handlers {
        font-size: 0;
        padding: 10px 20px;
        background-color: #192330;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        .handler {
          display: inline-block;
          margin-right: 10px;
          width: 20px;
          height: 20px;
          background-size: 100% 100%;
          cursor: pointer;
          &.handler-all {
            background-image: url("../../assets/images/exchange/plate_all.png");
            &.active {
              background-image: url("../../assets/images/exchange/plate_all_active.png");
            }
          }
          &.handler-green {
            background-image: url("../../assets/images/exchange/plate_green.png");
            &.active {
              background-image: url("../../assets/images/exchange/plate_green_active.png");
            }
          }
          &.handler-red {
            background-image: url("../../assets/images/exchange/plate_red.png");
            &.active {
              background-image: url("../../assets/images/exchange/plate_red_active.png");
            }
          }
        }
      }
      .plate-nowprice {
        text-align: center;
        background-color: #27313e;
        line-height: 1;
        display: flex;
        align-items: center;
        height: 40px;
        justify-content: center;
        font-size: 14px;
        font-weight: 500;
        .price {
          font-size: 18px;
          margin-right: 10px;
        }
        .price-cny {
          font-size: 12px;
          margin-left: 10px;
          font-weight: 400;
          color: rgba(219, 222, 246, 0.3);
        }
      }
    }
    .center {
      flex: 0 0 60%;
      margin-right: 5px;
      .imgtable {
        height: 415px;
        position: relative;
        overflow: hidden;
        margin-bottom: 5px;
        #zz {
          width: 100%;
          height: 100%;
          background-color: #252525;
          left: 0;
          top: 0;
          position: absolute;
          z-index: 99999;
          display: flex;
          justify-content: center;
          align-items: center;
          .loadingImg {
            width: 300px;
            height: 300px;
          }
        }
        .handler {
          position: absolute;
          top: 10px;
          right: 40px;
          z-index: 1000;
          > span {
            background-color: #2c3b59;
            color: #c7cce6;
            padding: 4px 8px;
            cursor: pointer;
            font-size: 13px;
            opacity: 0.5;
            &.active {
              opacity: 1;
            }
          }
        }
      }


      .trade_wrap {
        .trade_menu {
          position: relative;
          background-color: #192330;
          border-top-left-radius: 0px;
          border-top-right-radius: 0px;
          border-bottom: 1px solid #27313e;
          font-size: 0;
          height: 40px;
          line-height: 40px;
          > span {
            font-size: 16px;
            padding: 11px 20px;
            cursor: pointer;
            &.active {
              color: #FFF;
              border-bottom: 2px solid #f0a70a;
            }
            &:first-child {
              border-top-left-radius: 0px;
            }
          }
          .fee-wrap {
            position: absolute;
            top: 0;
            right: 20px;
            font-size: 12px;
            > span {
              margin-right: 10px;
              color: #7c7f82;
            }
            > a {
              vertical-align: middle;
            }
          }
        }
        .trade_panel {
          position: relative;
          .mask {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            background-color: rgba(0, 52, 77, 0.8);
            justify-content: center;
            align-items: center;
            z-index: 100;
            font-size: 24px;
            border-radius: 0px;
            // color: #bcd7e6;
          }
          .publish-mask {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 37, 64, 0.93);
            justify-content: center;
            align-items: center;
            z-index: 101;
            font-size: 24px;
            border-radius: 0px;
            // color: #bcd7e6;
          }
        }
        .trade_panel .panel .hd {
          border-bottom: none;
          b {
            color: #fff;
          }
          a {
            color: #f0a70a;
          }
        }
      }
    }
    .right {
      flex: 0 0 19%;
      margin-right: 5px;
      .coin-menu {
        height: 785px;
        background-color: #192330;
        margin-bottom: 10px;
        border-radius: 0px;
        position: relative;
        .page {
          position: absolute;
          left: 0;
          width: 100%;
          bottom: 0;
        }
      }
    }
  }
  .symbol {
    display: flex;
    justify-content: space-between;
    padding: 15px 30px;
    margin-bottom: 5px;
    align-items: center;
    background-color: #192330;
    line-height: 1;
    border-radius: 0px;
    .item {
      .price-cny {
        font-size: 12px;
        color: #546886;
      }
      .coin {
        font-size: 20px;
      }
      .text {
        width: 100%;
        display: block;
        font-size: 12px;
        color: #999;
        margin-bottom: 5px;
      }
      .num {
        font-size: 12px;
        color: #fff;
      }
      > img {
        display: block;
        width: 18px;
        height: 18px;
        cursor: pointer;
      }
    }
  }
  .order {
    width: 98.6%;
    margin-left: 0.5%;
    min-height: 227px;
    margin-bottom: 10px;
    .order-handler {
      // background-color: #192330;
      background-color: #192330;
      font-size: 0;
      border-radius: 6px;
      // line-height: 38px;
      > span {
        padding: 0 20px;
        font-size: 14px;
        display: inline-block;
        color: #fff;
        cursor: pointer;
        line-height: 40px;
        background-color: #192330;
        &.active {
          color: #f0a70a;
          background-color: #27313e;
        }
        &:first-child {
          border-top-left-radius: 0px;
        }
        &:last-child {
          border-top-right-radius: 0px;
        }
      }
    }
  }
}
.exchange.day {
  color: #333;
  background-color: #fff;
  .main {
    .left {
      background-color: #fff;
      box-shadow: 0 0 2px #ccc;
      .handlers {
        background-color: #fff;
      }
      .plate-nowprice {
        background-color: #fff;
        border-top: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
      }
    }
    .imgtable {
      border-radius: 6px;
      box-shadow: 0 0 2px #ccc;
      .handler {
        > span {
          border: 1px solid #333;
        }
      }
    }
    .trade_wrap {
      box-shadow: 0 0 2px #ccc;
      .trade_menu {
        background-color: #fafafa;
        > span {
          background-color: #fafafa;
          border-right: 1px solid #f0f0f0;
          &.active {
            background-color: #fff;
            color: #f0a70a;
          }
          &:last-child {
            border-top-right-radius: 6px;
          }
        }
        .ivu-icon {
          color: #333 !important;
        }
      }
      .trade_panel {
        box-shadow: 0 0 2px #ccc;
        .mask {
          background-color: rgba(0, 52, 77, 0.8);
          color: #fff;
        }
      }
      .trade_panel .panel .hd {
        border-bottom: none;
        b {
          color: #333;
        }
        a {
          color: #f0a70a;
        }
      }
    }
    .right {
      .coin-menu {
        background-color: #fff;
        box-shadow: 0 2px 2px #ccc;
      }
      .trade-wrap {
        box-shadow: 0 0 2px #ccc;
        border-radius: 6px;
      }
      // .ivu-table-wrapper{
      //         box-shadow:0 0 2px #ccc;
      //       }
    }
  }
  .symbol {
    background-color: #fff;
    box-shadow: 0 0 2px #ccc;
    .item {
      .text {
        color: #999;
      }
      .num {
        color: #333;
      }
    }
  }
  .order {
    box-shadow: 0 2px 2px #ccc;
    min-height: 227px;
    .order-handler {
      margin-right: -2px;
      background-color: #fff;
      > span {
        color: #333;
        background-color: #fafafa;
        box-shadow: 0 0 2px #ccc;
        &.active {
          color: #f0a70a;
          background-color: #fff;
        }
      }
    }
  }
}
#kline_container{
  background: #192330;
}
.tip {
  color: #585858;
  font-size: 14px;
  .blue {
    color: #227770;
  }
  .red_ {
    color: red;
  }
}
.coin-info{
  color: #8f9ca5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  padding-top: 15px;
}
.red, .gray, .green_ {
  height: 24px;
  line-height: 24px;
  width: 100px;
  border-radius: 4px;
  color: #fff;
}
.leftTable >>> .red__ {
  background-color: #EA5C53;

}
.leftTable >>> .green_ {
  background-color: #26A59A;
}
.leftTable >>> .gray {
  background-color: #757575;
}
</style>